import React from 'react'
import { clsx } from 'clsx'

export interface CardProps {
  children: React.ReactNode
  className?: string
  padding?: 'none' | 'sm' | 'md' | 'lg'
  shadow?: 'none' | 'sm' | 'md' | 'lg'
  border?: boolean
  hover?: boolean
}

const Card: React.FC<CardProps> = ({
  children,
  className,
  padding = 'md',
  shadow = 'md',
  border = true,
  hover = false
}) => {
  const baseClasses = ['bg-white rounded-lg']

  const paddingClasses = {
    none: '',
    sm: 'p-4',
    md: 'p-6',
    lg: 'p-8'
  }

  const shadowClasses = {
    none: '',
    sm: 'shadow-sm',
    md: 'shadow',
    lg: 'shadow-lg'
  }

  return (
    <div
      className={clsx(
        baseClasses,
        paddingClasses[padding],
        shadowClasses[shadow],
        border && 'border border-gray-200',
        hover && 'hover:shadow-lg transition-shadow duration-200',
        className
      )}
    >
      {children}
    </div>
  )
}

export interface CardHeaderProps {
  children: React.ReactNode
  className?: string
  actions?: React.ReactNode
}

const CardHeader: React.FC<CardHeaderProps> = ({
  children,
  className,
  actions
}) => {
  return (
    <div className={clsx('flex items-center justify-between mb-4', className)}>
      <div>{children}</div>
      {actions && <div className="flex items-center space-x-2">{actions}</div>}
    </div>
  )
}

export interface CardTitleProps {
  children: React.ReactNode
  className?: string
  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
}

const CardTitle: React.FC<CardTitleProps> = ({
  children,
  className,
  as: Component = 'h3'
}) => {
  return (
    <Component
      className={clsx(
        'text-lg font-semibold text-gray-900',
        className
      )}
    >
      {children}
    </Component>
  )
}

export interface CardDescriptionProps {
  children: React.ReactNode
  className?: string
}

const CardDescription: React.FC<CardDescriptionProps> = ({
  children,
  className
}) => {
  return (
    <p className={clsx('text-sm text-gray-600', className)}>
      {children}
    </p>
  )
}

export interface CardContentProps {
  children: React.ReactNode
  className?: string
}

const CardContent: React.FC<CardContentProps> = ({
  children,
  className
}) => {
  return (
    <div className={clsx('space-y-4', className)}>
      {children}
    </div>
  )
}

export interface CardFooterProps {
  children: React.ReactNode
  className?: string
}

const CardFooter: React.FC<CardFooterProps> = ({
  children,
  className
}) => {
  return (
    <div className={clsx('mt-6 pt-4 border-t border-gray-200', className)}>
      {children}
    </div>
  )
}


const CardCompound = Card as typeof Card & {
  Header: typeof CardHeader,
  Title: typeof CardTitle,
  Description: typeof CardDescription,
  Content: typeof CardContent,
  Footer: typeof CardFooter
}

CardCompound.Header = CardHeader;
CardCompound.Title = CardTitle;
CardCompound.Description = CardDescription;
CardCompound.Content = CardContent;
CardCompound.Footer = CardFooter;

export { CardCompound as Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter }
